<template>
  <div>
    <div class="container" v-show="!isShow">
      <header>
        <div @click="userQuit">退出</div>
        <h2>TIK</h2>
        <span>在线人数{{ live }}</span>
      </header>

      <div class="content" ref="messageContainer">
        <div v-for="item in list" :key="item.type">
          <div class="item left" v-if="item.type == 'left'">
            {{ item.content }}
          </div>
          <div class="item mid" v-if="item.type == 'mid'">
            <span>欢迎{{ item.content }}加入</span>

          </div>

          <div class="mid" v-if="item.type == 'mid-quit'">
            <span>{{ item.content }}已退出</span>
          </div>

          <div class="item right" v-if="item.type == 'right'">
            {{ item.content }}
          </div>
        </div>
      </div>

      <div class="snedbox">
        <el-input v-model="textValue" type="text" @keyup.enter="sned" />
        <el-button @click="sned">send</el-button>
      </div>
    </div>

    <div v-show="isShow" class="Joinbox">
      <div class="Infobox">
        <h2>
          Please enter your name
          实际项目会清掉这一环节,会自动读取user的信息。
        </h2>
        <input v-model="username" placeholder="username">
        <button @click="Join">Join</button>

        <button @click="partive">pppppppp</button>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { inject } from "vue";
import { formatTime } from "../util/time"
const socket: any = inject("socket")
const textValue = ref('')
const list: any = ref([])
const username = ref("")
const isShow = ref(true)
const live = ref(0)
// 消息发送
const sned = () => {
  if (textValue.value.length > 0 && username.value.length > 0) {
    let user = {
      name: username.value,
      content: textValue.value,
      date: formatTime(Date.now()),
      type: "right"
    }

    if (user.name.length == 0) return

    let data = {
      name: username.value,
      content: textValue.value,
      date: formatTime(Date.now()),
      type: "left"
    }
    list.value.push(user)
    socket.emit("message", data)
    textValue.value = ''
  }
  scrollToBottom()
}

// 欢迎加入
const Welcome = () => {
  socket.on("welcome", (name: string, onlive: number, id: string) => {
    // 在线人数
    live.value = onlive
    let data = {
      uid: id,
      content: name,
      date: formatTime(Date.now()),
      type: "mid",
      onlive
    }
    list.value.push(data)
  })
}
const getMsg = () => {
  socket.on("gbmsg", (data: string) => {
    console.log(data, "00");
    list.value.push(data)
  })

}

// 加入
const Join = () => {
  socket.emit("join", username.value)
  if (username.value.length > 0) {
    isShow.value = !isShow.value
  }
}

// 用户离开
const userQuit = () => {
  socket.on("quit", (name: string, onlive: number) => {
    let data = {
      content: name,
      date: formatTime(Date.now()),
      type: "mid-quit",
      onlive
    }
    list.value.push(data)
  })
}

// 一对一
const partive = () => {
  console.log("启动");
  socket.emit("private", {to:"U9m_Gw2v9QBLB8U3AAAD",msg:"你好"})
}
const partive2 = () => {
  console.log("启动2");
  socket.on("private", (data: string) => {
    console.log(data,"00");
  })
}


// 消息滚动到最新
const messageContainer = ref(null);
const scrollToBottom = () => {
  // Using $refs to access the message container and scroll to the bottom
  const container: HTMLElement = messageContainer.value!;
  console.log(container!.scrollHeight);
  container!.scrollTop = container!.scrollHeight;
}

onMounted(() => {
  socket.on('connect', () => {
    console.log(socket.id, '监听客户端连接成功-connect');
  });
  getMsg()
  Welcome()
  userQuit()
  partive2()
})

{// 虚拟列表中显示的项目数量
  // const itemHeight = 50; // 假设每个项目高度为50px
  // const containerHeight = 400; // 可见容器的高度

  // // 根据容器高度和项目高度计算可见项目的数量
  // const visibleItemCount = Math.ceil(containerHeight / itemHeight);

  // // 计算可见项目的索引
  // const startIndex = ref(0);
  // const endIndex = ref(visibleItemCount - 1);

  // // 从整个列表中获取可见项目
  // const visibleItems = ref([]);

  // const updateVisibleItems = () => {
  //   visibleItems.value = list.value.slice(startIndex.value, endIndex.value + 1);
  // };

  // const updateVisibleRange = () => {
  //   const container: HTMLElement = messageContainer.value!;
  //   if (container) {
  //     const scrollTop = container.scrollTop;
  //     const scrollIndex = Math.floor(scrollTop / itemHeight);
  //     startIndex.value = scrollIndex;
  //     endIndex.value = startIndex.value + visibleItemCount;
  //     updateVisibleItems();
  //   }
  // };
}




</script>

<style lang="less"  scoped>
.container {
  width: 40%;
  height: 60%;
  background-color: aliceblue;
  overflow: hidden;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .snedbox {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;

    input {
      width: 100%;
      height: 40px;
      border: none;
      outline: none;
    }
  }
}

.content {
  overflow-y: auto;
  width: 90%;
  height: 80%;
  margin: 0 auto;
  background-color: transparent;

  .item {
    margin: 4px 4px;
    padding: 2px;
  }

  .mid {
    text-align: center;
    color: #a9a7a7;
    font-size: small;
  }

  .left {
    display: flex;
    justify-content: flex-start;
    // background-color: rebeccapurple;

  }

  .right {
    display: flex;
    justify-content: flex-end;
    // background-color: rgb(164, 67, 11);
  }


}

.content::-webkit-scrollbar {
  display: none;
}

.Joinbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  // background: #000;
  background-color: rgba(141, 136, 136, 0.7);

  .Infobox {
    position: fixed;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 360px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    h2 {
      color: aliceblue;
    }

    input {
      height: 40px;
      border: none;
      font-size: 18px;
    }
  }
}
</style>
